<template>
  <span @click="rotate" class="hamburgerWrapper">
    <svg-icon iconClass="hamburger" :className="className"></svg-icon>
  </span>
</template>

<script>
import SvgIcon from "../SvgIcon/index.vue";

export default {
  components: {SvgIcon},
  name: 'Hamburger',
  props:{
    defaultActive: {
      type: Boolean,
      default: false
    }
  },
  data: function () {
    return {
      isActive: this.defaultActive
    }
  },
  computed:{
    className: function (){
      return 'svg ' + (this.isActive ? 'active' : '')
    }
  },
  methods:{
    rotate: function () {
      this.isActive = !this.isActive
      this.$emit('rotate', this.isActive)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .hamburgerWrapper{
    display: inline-block;

    .svg{
      /*过渡持续时间*/
      transition: all .38s;
      /*默认值*/
      transform-origin: 50% 50%;
      /*旋转变形*/
      transform: rotate(0deg);
      &.active{
        transform: rotate(90deg);
      }
    }
  }
</style>
